import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { ConfigProvider } from 'antd'
import { PersistGate } from 'redux-persist/integration/react'
import { Spin } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { store, persistor } from '@/store'
import App from './App'
import ThemeProvider from '@/components/ThemeProvider'
import '@/styles/index.css'

// 抑制开发环境下的一些警告
if (process.env.NODE_ENV === 'development') {
  // 抑制 React Router 的一些开发警告
  const originalWarn = console.warn
  console.warn = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('React Router')) {
      return
    }
    originalWarn.apply(console, args)
  }
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate 
        loading={
          <div style={{ 
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center', 
            height: '100vh',
            flexDirection: 'column'
          }}>
            <Spin size="large" />
            <div style={{ marginTop: 16, color: '#666' }}>
              正在加载应用状态...
            </div>
          </div>
        } 
        persistor={persistor}
      >
        <ThemeProvider>
          <ConfigProvider locale={zhCN}>
            <BrowserRouter
              future={{
                v7_startTransition: true,
                v7_relativeSplatPath: true
              }}
            >
              <App />
            </BrowserRouter>
          </ConfigProvider>
        </ThemeProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
)